@import "./mixins/compatibility.scss";

$inputHeight: 28px !default;
$inputSmallHeight: 22px !default;
$inputLargeHeight: 32px !default;

$inputBorderRadius: 2px !default;//3px
$inputColor: rgba(0,0,0,.8) !default;
$inputBGColor: #FFF !default;
$inputBorderColor: #c1c1c1 #d9d9d9 #d9d9d9 !default;
$inputPlaceholderColor: #ccc !default;
$inputHoverBorderColor: #49a9ee !default;

input[type="text"]::-ms-clear{
    display:none;
}

.nex-input {
	position:relative;
	display:inline-block;
	padding:0 7px;
	width:100%;
	height:$inputHeight;
	line-height:$inputHeight - 2;
	cursor:text;
	font-size:12px;
	color:$inputColor;
	background-color:#fff;
	background-image:none;
	border-radius:$inputBorderRadius;
	transition:all .3s;
	
	border-width: 1px;
    border-style: solid;
    border-color: $inputBorderColor;
	
	@include placeholder($inputPlaceholderColor);
	
}

.nex-input:focus,
.nex-input:hover {
	border-color:$inputHoverBorderColor;
}
.nex-input:focus {
	outline:0;
}
.nex-input[disabled] {
	/*
	background-color:#f7f7f7;
	opacity:1;
	cursor:not-allowed;
	color:rgba(0,0,0,.25);
	*/
	opacity: .5;
	cursor:default;
}
.nex-input[disabled]:hover {
	border-color: $inputBorderColor;
}
textarea.nex-input {
	min-width: 80px;
	width:100%;
	height:100%;
	vertical-align:bottom;
}
.nex-input-lg {
	height:$inputLargeHeight;
	line-height:$inputLargeHeight - 2;
}
.nex-input-sm {
	height:$inputSmallHeight;
	line-height:$inputSmallHeight - 2;
}

.nex-input-wrapper {
	position:relative;
	display: inline-block;
	width:100%;
	vertical-align:middle;

	textarea{
		resize: none;
	}

	textarea.nex-input-autosize {
		resize: both;
	}
	
	&.nex-input-wrapper-block {
		display: block;
	}
	
	&:hover .nex-input {
		border-color:$inputHoverBorderColor;
	}
	
	.nex-input-prefix,
	.nex-input-suffix {
		position:absolute;
		top:50%;
		transform: translateY(-50%);
		z-index:2;
	}
	
	.nex-input-prefix {
		left:7px;	
	}
	
	.nex-input-suffix {
		right:7px;	
	}
	
	.nex-input:not(:last-child) {
		padding-right: 24px;
		z-index:1;
	}

	.nex-input:not(:first-child) {
		padding-left: 24px;
		z-index:1;
	}
}

.nex-input-group {
	position:relative;
	display:inline-block;
	width:100%;
	
	>* {
		position:relative;
		display:inline-block;
		vertical-align:middle;
		float:none;
		z-index:1;
		width:auto;
	}
	
	>*:focus,
	>*:hover {
		z-index:2
	}
	
	>*:not(:first-child) {
		margin-left:-1px
	}
	
	>*:not(:first-child):not(:last-child) .nex-input {
		border-radius:0;
	}
	
	>*:first-child {
		margin-left:0
	}
	
	>*:first-child:not(:last-child) .nex-input {
		border-bottom-right-radius:0;
		border-top-right-radius:0;
	}
	>*:last-child:not(:first-child) .nex-input {
		border-bottom-left-radius:0;
		border-top-left-radius:0;
	}
}

.nex-input-group-lg {
	.nex-input {
		padding:0 7px;
		height: $inputLargeHeight;
		line-height: $inputLargeHeight - 2;
	}	
}

.nex-input-group-sm {
	.nex-input {
		padding:0 7px;
		height:$inputSmallHeight;
		line-height: $inputSmallHeight - 2;
	}	
}